<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{shared/header(Mytitle='用户信息')}"/>
<body class="bg-gray-100 font-sans flex flex-col h-screen">
  <nav th:replace="~{shared/nav}"/>
  <div th:replace="~{shared/modal}" />
  <div id="total" class="flex-grow flex items-center justify-center text-blue-600">
    <div id="show" class="container mx-auto p-5 rounded-lg shadow-md bg-white">
      <h1 class="text-2xl font-bold mb-4">User Information</h1>
      <div class="grid grid-cols-2 gap-4">
        <div class="flex flex-col">
          <label class="text-gray-600">ID</label>
          <p class="border border-blue-300 rounded p-2" th:text="${user.id} ?: '暂无'" />
        </div>
        <div class="flex flex-col">
          <label class="text-gray-600">Account</label>
          <p class="border border-blue-300 rounded p-2" th:text="${user.account} ?: '暂无'" />
        </div>
        <div class="flex flex-col">
          <label class="text-gray-600">Name</label>
          <p class="border border-blue-300 rounded p-2" th:text="${user.name} ?: '暂无'"/>
        </div>
        <div class="flex flex-col">
          <label class="text-gray-600">Gender</label>
          <p class="border border-blue-300 rounded p-2" th:text="${user.gender ?: '暂无'}"/>
        </div>
        <div class="flex flex-col">
          <label class="text-gray-600">Phone</label>
          <p class="border border-blue-300 rounded p-2" th:text="${user.phone} ?: '暂无'" />
        </div>
        <div class="flex flex-col">
          <label class="text-gray-600">Email</label>
          <p class="border border-blue-300 rounded p-2" th:text="${user.email} ?: '暂无'" />
        </div>
        <div class="col-span-2">
          <label class="text-gray-600">Description</label>
          <p class="border border-blue-300 rounded p-2" th:text="${user.description} ?: '暂无'"/>
        </div>
      </div>
      <div class="text-center mt-4">
        <button onclick="switchStatus()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
          编辑信息
        </button>
        <button onclick="changePWD()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
          修改密码
        </button>
      </div>
    </div>
    <div id="edit" class="hidden rounded-lg shadow-md p-5 bg-white">
      <h1 class="text-2xl font-bold mb-4">Update Information</h1>
      <form id="update">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" placeholder="用户名" th:value="${user.name} ?: ''" class="border border-blue-300 rounded p-2"/><br><br>

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="邮箱" th:value="${user.email} ?: ''" class="border border-blue-300 rounded p-2"/><br><br>

        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male" th:checked="${user.gender == 'male'}" />
        <label for="male">男性</label>
        <input type="radio" id="female" name="gender" value="female" th:checked="${user.gender == 'female'}" />
        <label for="female">女性</label><br><br>

        <label for="phone">电话：</label>
        <input type="text" id="phone" name="phone" placeholder="手机号"  pattern="\(?[0-9]*\)?[0-9]*" th:value="${user.phone} ?: ''" class="border border-blue-300 rounded p-2"/><br><br>

        <label for="description">描述：</label><br>
        <textarea id="description" name="description" rows="4" cols="50" placeholder="介绍一下自己吧" th:text="${user.description} ?: ''" class="border border-blue-300 rounded p-2" /><br><br>


        <button type="button" onclick="switchStatus()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">取消</button>
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">提交</button>
      </form>
    </div>
  </div>
  <footer th:replace="~{shared/footer}"/>
</body>
</html>
<script th::inline="javascript">
  var onshow = true; //标记是否在展示
  function switchStatus(){
    if(onshow) { //在展示就切换成编辑
      $('#show').addClass('hidden')
      $('#edit').removeClass('hidden')
    }else { //反之
      $('#show').removeClass('hidden')
      $('#edit').addClass('hidden')
    }
    onshow = !onshow
  }

  function changePWD(){
    window.location.href = WebPrefix + "/changepw"
  }

  $('#update').submit(function (event){
    event.preventDefault()
    const formData = {
      id: [[${user.id}]],
      name: $('#name').val(),
      email: $('#email').val(),
      gender: $('input[name="gender"]:checked').val(),
      description: $('#description').val(),
      phone: $('#phone').val()
    };
    // 过滤掉空值字段
    const filteredData = {};
    $.each(formData, function(key, value) {
      if (value !== '') {
        filteredData[key] = value;
      }
    });
    console.log(filteredData)
    // 检查是否有填写的字段，如果没有，给出提示
    if (Object.keys(filteredData).length === 0) {
      showModal("错误","请至少输入一个字段",'error')
      return;
    }

    $.ajax({
      type: 'POST',
      url: `${WebPrefix}/user/update`,
      data: JSON.stringify(filteredData),
      contentType:"application/json",
      dataType:"json",
      success: function(response) {
        showModal('result',response.message,response.result?'success':'error')
        switchStatus()
        $('#total').load(document.URL + '#total')
        // window.location.href = WebPrefix + "/detail"
      },
      error: function(error) {
        console.error('提交表单时出错：', error)
      }
    });
  })

</script>

